<template>
	<div class="calendar">
		<el-button type="primary" class="add-calendar-btn" @click="addNewCalendar">新建日程</el-button>

		<div class="nav">
			<!-- 顶部工具栏/select框、按钮之类 -->
			<toolbar ref="toolbar"></toolbar>
			<!-- FullCalendar插件 -->
			<template>
			 	<FullCalendar ref="fullCalendar" :options="calendarOptions"/>
			</template>
			<!-- 日历表格底部类型提示方块 -->
			<div class="calendar-tips clear">
				<span v-for="(event,index) of tableTips" :key="index">
					<i :class="`color${index}`"></i>
					<i>{{event}}</i>
				</span>
			</div>
		</div>

		<!-- 弹窗：新建/编辑/查看 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" @close="dialogVisible = false">
			<event-form v-if="dialogVisible" ref="eventForm"></event-form>
    	</el-dialog>
	</div>
</template>

<script>
// 顶部工具栏
import toolbar from './toolbar'

// 引入FullCalendar
import FullCalendar from '@fullcalendar/vue'
//  引入FullCalendar插件的一些组件
import timeGridPlugin from '@fullcalendar/timegrid'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

import moment from 'moment';
import { fail } from 'assert';


//日程新增、修改、查看的弹窗部分
import eventForm from './event-form'

export default {
	components:{
		toolbar,
		FullCalendar,
		eventForm
	},
	data() {
		return {
			tableTips:['个人日程','班级日程','年级日程','学校日程'],
			calendarOptions: {
				// 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
				plugins: [ dayGridPlugin,timeGridPlugin],// dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin
				initialView: 'dayGridMonth', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
				firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
				locale: 'zh-cn', // 切换语言，当前为中文
				eventColor: '#3BB2E3', // 全部日历日程背景色
				initialDate: moment(new Date()).format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
				aspectRatio: 2.1, // 设置日历单元格宽度与高度的比例。
				displayEventTime: false, // 是否显示时间
				allDaySlot: false, // 周，日视图时，all-day 不显示
				headerToolbar: { // 日历头部按钮都设置为空，不然有默认值
					left: '',
					center: '',
					right: ''
				},
				buttonText: {
					today: '今天',
					month: '月',
					week: '周',
				},
				slotLabelFormat: {
					hour: '2-digit',
					minute: '2-digit',
					meridiem: false,
					hour12: false // 设置时间为24小时
				},
				slotDuration: '00:30',
                scrollTime:'06:00:00',
				// 事件
				events:[],
				eventClick: this.handleEventClick, // 点击日历日程事件
				// eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
				// eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
				// eventDrop: this.eventDrop, // 拖动日历日程事件
				// eventResize: this.eventResize, // 修改日历日程大小事件
				// select: this.handleDateSelect, // 选中日历格事件
				// datesSet: this.titleBtnClick, //日历顶部的按钮点击事件
				// eventDidMount: this.eventDidMount, // 安装提示事件
				// loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
				// selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
				// eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
				allowContextMenu: false,
				editable: false, // 是否可以进行（拖动、缩放）修改
				eventStartEditable: false, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
				eventDurationEditable: false, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
				selectable: false, // 是否可以选中日历格
				selectMirror: false,
				selectMinDistance: 0, // 选中日历格的最小距离
				dayMaxEvents: false,
				weekends: true,
				navLinks: false, // 天链接
				selectHelper: false,
				// slotEventOverlap: false // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
			},
			dialogTitle:'',
			dialogVisible:false
		};
	},
	created() {
	},
	mounted () {

	},
	watch: {

    },
    computed: {

    },
	methods: {
		//新建日程
		addNewCalendar() {
			this.dialogTitle = '新建日程';
			this.dialogVisible = true; 
			this.$nextTick(()=>{
				this.$refs.eventForm.dialogType = 0; 
			})
		},
		// 点击一个日程
		handleEventClick(e){
			let event = deep_clone(e.event._def.extendedProps);
			event.id = e.event._def.publicId
			this.dialogVisible = true;
			const isSelf = event.create_id == this.$store.getters.userInfo.id;
			this.dialogTitle = isSelf ? '编辑' : '查看';
			this.$nextTick(()=>{
				console.log(event,event.create_id ,this.$store.getters.userInfo.id)
				this.$refs.eventForm.dialogType = isSelf ? 1 : 2; 
				this.$refs.eventForm.calendarForm = event; 
				this.$refs.eventForm.calendarForm.grade_id = event.grade_id.map(Number);//年级el-cascader 绑定的calendarForm.grade_id是个数组，每一层级绑定的值是数字类型，此处转一下，否则无法显示
			})
		},
		getdata(){
			this.dialogVisible = false;
			this.$refs.toolbar.getSchedule();
		},
	}
};
</script>
<style lang="scss">
	.calendar {
		max-width: 1800px;
		margin: auto;
		position: relative;
		.add-calendar-btn {
			padding: 12px 21px;
			position: absolute;
			top: -85px;
			right: 0;
		}
		.calendar-tips {
			margin-top: 50px;
			padding-left: 60%;
			span {
				float: right;
				font-size: 16px;
				font-weight: 600;
				height: 16px;
				line-height: 16px;
				margin-left: 20px;
			}
			.color0,
			.color1,
			.color2,
			.color3{
				width: 16px;
				height: 16px;
				border-radius: 4px;
			}

			i {
				display: inline-block;
				vertical-align: middle;
			}
		}
		.eventClass3,.color3 {
			background-color: #ffe0fb;
		}
		.eventClass2,.color2 {
			background-color: #dde2ff;
		}
		.eventClass1,.color1 {
			background-color: #c3f6cf;
		}
		.eventClass0,.color0 {
			background-color: #bcecff;
		}
		.eventClass3,.eventClass2,.eventClass1,.eventClass0 {
			.fc-event-title{
				height: 14px;
				line-height: 14px;
				font-weight: normal;
			}
			.fc-sticky {
				height: 16px;
				line-height: 16px;
			}
			.fc-daygrid-event-dot{
				display: none;
			}
		}

	}

	.fc-sticky {
		word-break: break-all;
	}
	.el-icon-star-on {
		&:before {
			content: "";
		}
		.fc-event-title,.fc-sticky{
			&::before {
				content: "\E797";
				color: #d90e64;
				// font-size: 16px;
			}
		}
	}
	.fc-daygrid-event .fc-sticky{
		height: 20px;
		line-height: 20px;
	}
</style>
